import { Search } from "@element-plus/icons-vue";
import { ElButton, ElInput } from "element-plus";
import { defineComponent, PropType, ref } from "vue";
import Style from './index.module.scss';

export default defineComponent({
    props: {
        placeholder: {
            type: String as PropType<string>,

        },
        modelValue: {
            type: String as PropType<string>,
            required: false,
        },
    },
    emits: ["update:modelValue","click"],
    setup(props,{emit,attrs}) {
     
        return () => <>
            <ElInput size="large" class={[Style.inputStyle, "inputInner"]} style={{ height: "60px" }} modelValue={props.modelValue}
                placeholder={props.placeholder}
                onInput={
                    (val)=>{
                        emit("update:modelValue",val)
                    }
                }
                {...attrs}
            >
                {{
                    append: () => {
                        return <ElButton style={{ width: "91px" }} type="primary" icon={Search} onClick={()=>{
                            emit("click",props.modelValue)
                        }}></ElButton>
                    }
                }}
            </ElInput>
        
        </>
    }
})